<html>
<head>
<title></title>
<link rel=stylesheet href="css/style.css" type="text/css"/>
<style>

.floatleft{
    float:left;
}
.centertxt{
    margin:10px;
}
li{
    list-style-type:none;
}

#leftdice{
    background-image: url('img/dice/bckleft.png');
    width:50%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float:left;
}

#rightdice{
    background-image: url('img/dice/bckright.png');
    width:50%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float:left;
}


    @media (max-width: 767px){
        html, body {   
            color: white;
            font-size: 14px;
        }

        #player1lbl{
            position: fixed;
            margin-top:4%;
            margin-left:10%;
        }
        #player2lbl{
            position: fixed;
            margin-top:4%;
            margin-left:10%;
        }
        #dice1div{
            position: fixed;
            margin-top:20%;
            margin-left:5%;
        }
        #dice2div{
            position: fixed;
            margin-top:20%;
            margin-left:15%;
        }

        #list1{
            position: fixed;
            margin-left:23%;
            margin-top:10%;
        }
        #list2{
            position: fixed;
            margin-left:-15%;
            margin-top:10%;
        }
        #leftpoints{
            position: fixed;
            margin-top:45%;
            margin-left:7%;
			max-width: 20%;
        }
        #rightpoints{
            position: fixed;
            margin-top:45%;
            margin-left:20%;
        }
    }

    
</style>
</head>
<body>
<!--<button onclick='roll()'>Roll</button><br/>-->
    
<div id='leftdice'>
    <div class='floatleft' id='dice1div'>
        <img alt='dice1' src='img/dice/logo.png' id='dice1' height="80" width="80"/><br/>
    </div>

    <div class='floatleft centertxt' id='player1lbl'>
        <label id='player1'>player1</label>
        <ul id='list1'>
			<li>2</li>
			<li>5</li>
			<li>7</li>	
		</ul>
    </div>
    
    <div id='leftpoints'>
        <label id='p1units'>2</label>
        <label> points remaining</label>
    </div>
</div>

<div id='rightdice'>
    <div class='floatleft centertxt' id='player2lbl'>
        <label id='player2'>player2</label>
        <ul id='list2'>
			<li>2</li>
			<li>5</li>
			<li>7</li>
		</ul>
    </div>

    <div class='floatleft' id='dice2div'>
        <img alt='dice2' src='img/dice/logo.png' id='dice2' height="80" width="80"/><br/>
    </div>
    
    <div id='rightpoints'>
        <label id='p2units'>5</label>
        <label> points remaining</label>
    </div>
</div>

<script >


</script>
</body>
</html>